<template>
  <div class="">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-table
        :data="ruleForm.tableData"
        style="width: 100%"
        :header-cell-class-name="mustCls"
        type="index"
        :header-cell-style="{
          background: '#fafafa',
          color: '#333',
          borderBottom: '1px solid #f0f0f0',
        }"
      >
        <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in colData" :key="index">
          <template slot-scope="scope" v-if="item.type">
            <el-form-item :prop="'tableData.' + scope.$index + '.' + item.prop" :rules="rules[item.rules]">
              <el-input
                v-if="item.type === 'text'"
                show-word-limit
                :disabled="item.disabled"
                :placeholder="$t('请输入')"
                v-model="scope.row[item.prop]"
              ></el-input>
              <el-select v-if="item.type === 'option'" v-model="scope.row[item.prop]" :placeholder="$t('请输入')">
                <el-option
                  v-for="(item, index) in scope.row[item.option]"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item class="center btn-box">
        <el-button type="primary" @click="save('ruleForm')">{{ $t("保存") }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import DonMessage from "common/js/message";
import { validationFailText } from "common/js/config";

export default {
  name: "validateTabel",
  props: {
    ruleForm: Object,
    rules: Object,
    colData: Array,
    must: Array,
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {},
  methods: {
    mustCls({ columnIndex }) {
      if (this.must.includes(columnIndex)) {
        return "must";
      }
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm);
          this.$emit("save", this.ruleForm);
        } else {
          new DonMessage().error({
            message: validationFailText,
          });
        }
      });
    },
    reset() {
      this.$refs["ruleForm"].resetFields();
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
